<template>
    <div class="app-container">
        <!--标准数据集详情对话框-->
        <el-row :gutter="10">
            <el-col :span="7">
                <span size="mini" style="font-size: 12px; font-weight: bold">Year:
                </span>
                {{ standard.year }}
            </el-col>
            <el-col :span="7">
                <span size="mini" style="font-size: 12px; font-weight: bold">Month:
                </span>
                {{ standard.month }}
            </el-col>
            <el-col :span="10">
                <span size="mini" style="font-size: 12px; font-weight: bold">Source:
                </span>
                {{ standard.source }}
            </el-col>
        </el-row>

        <el-row :gutter="10">
            <el-col :span="24">
                <span size="mini" style="font-size: 12px; font-weight: bold">Content:
                </span>
                <p v-html="emrContent" class="filed-content"></p>
            </el-col>
        </el-row>

        <el-row :gutter="10">
            <el-col :span="24">
                <span size="mini" style="font-size: 12px; font-weight: bold">Ades:
                </span>
                <p class="filed-content" style="color: #008800">
                    {{ formJson(standard.ades) }}
                </p>
            </el-col>
        </el-row>

        <el-row :gutter="10">
            <el-col :span="6">
                <span size="mini" class="field-label">NAG_Enire: </span>
                <p class="filed-content">{{ formJson(standard.nagAdesEnire) }}</p>
            </el-col>
            <el-col :span="6">
                <span size="mini" class="field-label">NAG_Deepseek: </span>
                <p class="filed-content">{{ formJson(standard.nagAdesDeepseek) }}</p>
            </el-col>
            <el-col :span="6">
                <span size="mini" class="field-label">NAG_Gpt: </span>
                <p class="filed-content">{{ formJson(standard.nagAdesGpt) }}</p>
            </el-col>
            <el-col :span="6">
                <span size="mini" class="field-label">NAG_Qwen: </span>
                <p class="filed-content">{{ formJson(standard.nagAdesQwen) }}</p>
            </el-col>
        </el-row>

        <el-row :gutter="10">
            <el-col :span="6">
                <span size="mini" class="field-label">SAG_Enire: </span>
                <p class="filed-content">{{ formJson(standard.adesEnire) }}</p>
            </el-col>

            <el-col :span="6">
                <span size="mini" class="field-label">SAG_Deepseek: </span>
                <p class="filed-content">{{ formJson(standard.adesDeepseek) }}</p>
            </el-col>

            <el-col :span="6">
                <span size="mini" class="field-label">SAG_Gpt: </span>
                <p class="filed-content">{{ formJson(standard.adesGpt) }}</p>
            </el-col>

            <el-col :span="6">
                <span size="mini" class="field-label">SAG_Qwen: </span>
                <p class="filed-content">{{ formJson(standard.adesQwen) }}</p>
            </el-col>
        </el-row>

        <el-row :gutter="10">
            <el-col :span="6">
                <span size="mini" class="field-label">RAG_Enire: </span>
                <p class="filed-content">{{ formJson(standard.ragAdesEnire) }}</p>
            </el-col>
            <el-col :span="6">
                <span size="mini" class="field-label">RAG_Deepseek: </span>
                <p class="filed-content">{{ formJson(standard.ragAdesDeepseek) }}</p>
            </el-col>
            <el-col :span="6">
                <span size="mini" class="field-label">RAG_Gpt: </span>
                <p class="filed-content">{{ formJson(standard.ragAdesGpt) }}</p>
            </el-col>
            <el-col :span="6">
                <span size="mini" class="field-label">RAG_Qwen: </span>
                <p class="filed-content">{{ formJson(standard.ragAdesQwen) }}</p>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {
    getStandard
} from "@/api/ade/standard";

export default {
    name: "StandardDetail",
    props: {
        id: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            standard: {
                year: "",
                month: "",
                source: "",
                content: "",
                ades: [],
                nagAdesEnire: [],
                nagAdesDeepseek: [],
                nagAdesGpt: [],
                nagAdesQwen: [],
                adesEnire: [],
                adesDeepseek: [],
                adesGpt: [],
                adesQwen: [],
                ragAdesEnire: [],
                ragAdesDeepseek: [],
                ragAdesGpt: [],
                ragAdesQwen: []
            },
            emrContent: "" // 用于存储格式化后的EMR内容
        };
    },
    computed: {

    },
    created() {
        console.log("StandardDetail created with id:", this.id);
        getStandard(this.id).then((response) => {
            this.standard = response.data;
            this.hightlightJson();
        });
    },
    methods: {
        formJson(value) {
            if (value != null && value != undefined && value != "") {
                try {
                    const parsed = JSON.parse(value);
                    return JSON.stringify(parsed, null, 2);
                } catch (error) {
                    return "[]";
                }
            }
            return "[]";
        },
        hightlightJson() {
             const parsed = JSON.parse(this.standard.ades);
            this.emrContent = this.standard.content; // 初始化格式化的EMR内容    将emrContent中识别到的sentence打上标签 便于展示
            let rep = "";
            for (let i = 0; i < parsed.length; i++) {
                rep = parsed[i].sentence; // 将其他ADE名称用 | 分隔
                if (rep == null || rep == undefined) {
                    //如果sentence沒有標注
                    for (let j = 0; j < parsed[i].reactions.length; j++) {
                        rep = parsed[i].reactions[j];
                        this.emrContent = this.emrContent.replaceAll(
                            rep,
                            '<font color="red">' + rep + "</font>"
                        );
                    }
                } else {
                    this.emrContent = this.emrContent.replaceAll(
                        rep,
                        '<font color="red">' + rep + "</font>"
                    );
                }
            }
        },
    }
}
</script>

<style scoped>
/**Standard 详情页面相关样式 */
p.filed-content {
    line-height: 1.6;
    /* 舒适的行高 */
    color: #333;
    /* 深灰色文字，比纯黑更柔和 */
    margin: 0 0 1.2em 0;
    /* 底部外边距 */
    padding: 0.5rem 0.5rem;
    /* 内边距 */
    background: linear-gradient(135deg,
            #f8f9fa 0%,
            #e9ecef 100%);
    /* 柔和渐变背景 */
    border-radius: 8px;
    /* 圆角 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    /* 细微阴影 */
    border-left: 4px solid #6c757d;
    /* 左侧装饰性边框（可改主题色） */
    transition: all 0.3s ease;
    /* 悬停动画 */
    flex-grow: 1;
    /* 允许内容段落扩展 */
    white-space: pre-wrap;
    /* 保留空白和换行 */
    font-family: monospace;
    /* 使用等宽字体 */
    font-size: 12px;
}

/* 悬停效果（可选） */
p:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

span.field-label {
    font-size: 12px;
    font-weight: bold;
}
</style>